<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
  <script src="./libs/scrollReveal/scrollreveal.min.js"></script>
  <link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
  <title>Document</title>
</head>

<body>
  <header>
    <div class="logo">某某科技</div>
    <nav class="nav">
      <a href="#home" class="active">首页</a>
      <a href="#about">关于我们</a>
      <a href="#showcase">合作案例</a>
      <a href="#service">服务细节</a>
      <a href="#team">团队成员</a>
      <a href="#history">公司动态</a>
    </nav>
    <div class="bars">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
  </header>
  <main>
    <div id="home" class="glide" data-d>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="slide-caption left">
              <h1>创新人生，科技未来</h1>
              <h3>用科技和创新拥抱未来</h3>
              <button class="btn">探索更多</button>
            </div>
            <div class="banner"></div>
            <img src="./images/bg1.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <div class="slide-caption">
              <h1>相信技术的力量</h1>
              <h3>数据平台下的商务时代</h3>
              <button class="btn">探索更多</button>
            </div>
            <div class="banner"></div>
            <img src="./images/bg2.jpg" alt="">
            <!-- <video src="videos/working-man.mp4" muted autoplay loop></video> -->
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <!--左箭头-->
        <div class="swiper-button-prev"></div>
        <!--右箭头-->
        <div class="swiper-button-next"></div>

      </div>
    </div>
    <div class="contentWrap">
      <section id="about" class="about" data-d>
        <h2 class="title1">关于我们</h2>
        <p class="desc">
          提供你需要的一切企业网络科技
        </p>
        <div class="features">
          <div class="feature">
            <i class="fas fa-lightbulb"></i>
            <h4 class="feature-title">品牌创意</h4>
            <p class="feature-content">为企业设计独具风格的展现企业价值观的视觉效果</p>
          </div>
          <div class="feature">
            <i class="fas fa-chart-line"></i>
            <h4 class="feature-title">整合营销</h4>
            <p class="feature-content">
              通过市场进入分析、制定网络营销战略、网络营销实施
            </p>
          </div>
          <div class="feature">
            <i class="fas fa-shopping-cart"></i>
            <h4 class="feature-title">电子商务</h4>
            <p class="feature-content">
              根据企业需求，开设不同的销售渠道，通过网上直销
            </p>
          </div>
          <div class="feature">
            <i class="fas fa-desktop"></i>
            <h4 class="feature-title">网页设计</h4>
            <p class="feature-content">
              通过网站建设、智能建站、域名主机、企业邮箱
            </p>
          </div>
          <div class="feature">
            <i class="fas fa-tachometer-alt"></i>
            <h4 class="feature-title">网站优化</h4>
            <p class="feature-content">
              网站推广是指将网站推广到国内各大知名网站和搜索引擎
            </p>
          </div>
          <div class="feature">
            <i class="fas fa-server"></i>
            <h4 class="feature-title">数据平台</h4>
            <p class="feature-content">
              依托数据建立企业自身数据平台
            </p>
          </div>
        </div>
      </section>
      <section id="showcase" class="showcases section-bg" data-d>
        <h2 class="title1">合作案例</h2>
        <div class="filter-btns">
          <button class="filter-btn active" data-filter="*">全部</button>
          <button class="filter-btn" data-filter=".web">WEB</button>
          <button class="filter-btn" data-filter=".mobile">移动端</button>
          <button class="filter-btn" data-filter=".science">研发</button>
        </div>
        <div class="cases">
          <div class="case-item web science">
            <img src="" alt="" data-img="./images/exp1.jpg"/>
          </div>
          <div class="case-item web science">
            <img src="" alt="" data-img="./images/exp2.jpg"/>
          </div>
          <div class="case-item web">
            <img src="" alt="" data-img="./images/exp3.jpg"/>
          </div>
          <div class="case-item web">
            <img src="" alt="" data-img="./images/exp4.jpg"/>
          </div>
          <div class="case-item mobile">
            <img src="" alt="" data-img="./images/exp5.jpg"/>
          </div>
          <div class="case-item science">
            <img src="" alt="" data-img="./images/exp6.jpg"/>
          </div>
          <div class="case-item mobile web science">
            <img src="" alt="" data-img="./images/exp7.jpg"/>
          </div>
          <div class="case-item mobile ">
            <img src="" alt="" data-img="./images/exp8.jpg"/>
          </div>
        </div>
      </section>
      <section id="service" class="service" data-d>
        <h2 class="title1">服务细节</h2>
        <p class="desc">
          提供电子商务平台，数据开放平台和网络增值服务（如网站建设和推广，网站优化）等业务
        </p>
        <div class="services">
          <div class="service-item">
            <div class="service-title">
              <i class="fas fa-comments"></i>
              <h2>需求沟通</h2>
            </div>
            <p class="service-content">
              客户建设的基本需求，包括设计要求及功能要求
            </p>
          </div>
          <div class="service-item">
            <div class="service-title">
              <i class="fas fa-gavel"></i>
              <h2>项目评估</h2>
            </div>
            <p class="service-content">
              根据客户提出的需求进行评估，估算出相应的时间
            </p>
          </div>
          <div class="service-item">
            <div class="service-title"><i class="fas fa-file-signature"></i>
              <h2>签订合同</h2>
            </div>

            <p class="service-content">
              双方共同签订合同
            </p>
          </div>
          <div class="service-item">
            <div class="service-title">
              <i class="fas fa-user"></i>
              <h2>提案阶段</h2>
            </div>

            <p class="service-content">
              完成项目设计书
            </p>
          </div>
          <div class="service-item">
            <div class="service-title">
              <i class="fas fa-chalkboard-teacher"></i>
              <h2>制作阶段</h2>
            </div>

            <p class="service-content">
              完成所有页面的设计，进行程序开发以及前后后台数据整合
            </p>
          </div>
          <div class="service-item">
            <div class="service-title"><i class="fas fa-user-check"></i>
              <h2>产品验收</h2>
            </div>

            <p class="service-content">
              根据合同条款进行网站验收，并进行相应后续维护
            </p>
          </div>
        </div>
      </section>
      <section id="team" class="team section-bg" data-d>
        <h2 class="title1">团队成员</h2>
        <div class="team-members">
          <div class="team-member">
            <div class="profile-image">
              <img src="" alt="" data-img="./images/person1.jpg">
            </div>
            <h4 class="name">Tom</h4>
            <p class="position">前端工程师</p>
            <ul class="social-links">
              <li>
                <a href="#"><i class="fab fa-weibo"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-github"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-linkedin"></i></a>
              </li>
            </ul>
          </div>
          <div class="team-member">
            <div class="profile-image">
              <img src="" alt="" data-img="./images/ui.jpg"/>
            </div>
            <h4 class="name">Mary</h4>
            <p class="position">UI设计师</p>
            <ul class="social-links">
              <li>
                <a href="#"><i class="fab fa-weibo"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-github"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-linkedin"></i></a>
              </li>
            </ul>
          </div>
          <div class="team-member">
            <div class="profile-image">
              <img src="" alt="" data-img="./images/person2.jpg"/>
            </div>
            <h4 class="name">Jerry</h4>
            <p class="position">后端工程师</p>
            <ul class="social-links">
              <li>
                <a href="#"><i class="fab fa-weibo"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-github"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-linkedin"></i></a>
              </li>
            </ul>
          </div>
          <div class="team-member">
            <div class="profile-image">
              <img src="" alt="" data-img="./images/market.jpg"/>
            </div>
            <h4 class="name">mark</h4>
            <p class="position">市场专员</p>
            <ul class="social-links">
              <li>
                <a href="#"><i class="fab fa-weibo"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-github"></i></a>
              </li>
              <li>
                <a href="#"><i class="fab fa-linkedin"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <section class="data">
        <div class="data-piece">
          <i class="fas fa-code"></i>
          <div class="num">7979</div>
          <div class="data-desc">行代码</div>
        </div>
        <div class="data-piece">
          <i class="fas fa-award"></i>
          <div class="num">211</div>
          <div class="data-desc">个奖项</div>
        </div>
        <div class="data-piece">
          <i class="fas fa-laugh-wink"></i>
          <div class="num">985</div>
          <div class="data-desc">位客户</div>
        </div>
        <div class="data-piece">
          <i class="fas fa-folder"></i>
          <div class="num">120</div>
          <div class="data-desc">个项目</div>
        </div>
      </section>
      <section id="history" class="history" data-d>
        <h2 class="title1">公司动态</h2>
        <p class="desc">关注公司动态，第一时间获取消息</p>
        <div class="history-items">
          <div class="history-item history-right">
            <div class="custom"></div>
            <div class="year">
              <span>2017.09</span>
            </div>
            <div class="text">
              <h3>合作伙伴突破700家</h3>
              <p>与700家企业建立合作关系，提供全天候服务</p>
            </div>
          </div>
          <div class="history-item ">
            <div class="custom"></div>
            <div class="year">
              <span>2018.03</span>
            </div>
            <div class="text">
              <h3>获得科技创新奖</h3>
              <p>在2018年全市科技开发企业中获得科技创新奖项</p>
            </div>
          </div>
          <div class="history-item history-right">
            <div class="custom"></div>
            <div class="year">
              <span>2018.07</span>
            </div>
            <div class="text">
              <h3>成立新研发中心</h3>
              <p>在上海和深圳成立研发中心和分公司</p>
            </div>
          </div>
          <div class="history-item ">
            <div class="custom"></div>
            <div class="year">
              <span>2019.05</span>
            </div>
            <div class="text">
              <h3>开发产品</h3>
              <p>大数据产品，电商商品数字系统</p>
            </div>
          </div>
          <div class="history-item history-right">
            <div class="custom"></div>
            <div class="year">
              <span>2020.08</span>
            </div>
            <div class="text">
              <h3>荣获多个奖项</h3>
              <p>“最佳服务商”，“年度最满意合作伙伴”</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
  <footer>
    <div class="footer-menus">

      <!-- 导航菜单 -->
      <div class="service-menu footer-menu">
        <p class="menu-title">服务概览</p>
        <ul class="menu-items">
          <li><a href="#">数据平台</a></li>
          <li><a href="#">电子商务</a></li>
          <li><a href="#">网页设计</a></li>
          <li><a href="#">移动应用</a></li>
        </ul>
      </div>
      <div class="showcase-menu footer-menu">
        <p class="menu-title">成功案例</p>
        <ul class="menu-items">
          <li><a href="#">电子商务</a></li>
          <li><a href="#">移动网站</a></li>
          <li><a href="#">科研项目</a></li>
          <li><a href="#">软件应用</a></li>
        </ul>
      </div>
      <div class="activity-menu footer-menu">
        <p class="menu-title">公司动态</p>
        <ul class="menu-items">
          <li><a href="#">信息公开</a></li>
          <li><a href="#">最近新闻</a></li>
          <li><a href="#">最新博客</a></li>
        </ul>
      </div>
      <div class="help-menu footer-menu">
        <p class="menu-title">帮助与支持</p>
        <ul class="menu-items">
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">联系客服</a></li>
          <li><a href="#">文档资源</a></li>
        </ul>
      </div>
      <!-- 联系信息 -->
      <div class="contact-us">
        <p class="menu-title">联系我们</p>
        <p>地址：中国XX省XX市XX路XX中心10号楼</p>
        <p>电话：400-0201-xxx</p>
        <p>电子邮箱：2450424893@qq.com</p>
      </div>
      <!-- 备案信息 -->
      <p class="icp-info">
        蜀ICP备 1234xxxx5678 号
      </p>
      <!-- 版权信息 -->
      <p class="rights">
        &copy; 2020 某某科技 - All Right Reseved
      </p>
      <!-- 返回顶部按钮 -->
      <div class="scrollToTop">
        <a href="#home"><i class="fas fa-chevron-up"></i></a>
      </div>
    </div>
  </footer>
  <script src="./libs/anime/anime.min.js"></script>
  <script src="./libs/isotope/isotope.pkgd.min.js"></script>
  <script src="./libs/smooth-scroll/smooth-scroll.polyfills.min.js"></script>
  <script src="./js/index.js"></script>
  <script src="./js/scrollReveal.js"></script>
  <script src="./js/dataShow.js"></script>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      autoplay: true,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
  </script>
</body>

</html>